<template>
	<view>
		<progressBar :currentStep="1" />
		<view class="msg-box">
			<view class="item-box">
				<view class="msg-title">
					预约单信息
				</view>
				<view>
					<view v-for="(item,index) in fromList" :key="index">
						<formItem 
						:label="item.label" 
						:key="index" 
						v-model="form[item.model]" 
						:rightIcon="item.rightIcon" 
						:disabled="item.disabled" 
						titleType="dotted-title"
						@rightClick="event(item,index)"
						>						
						</formItem>
					</view>					
				</view>				
			</view>
			<category
				labelName="维修项目"
				:editType="editType"
				openType="hours"
				:itemList="wisList"
				:labelList="shrinklist"
				deleteField="wiId"
				@openItem="openItem"
				@deleteItem="deleteItem"
			></category>
			<category
				labelName="维修备件"
				:editType="editType"
				openType="parts"
				:itemList="partsList"
				:labelList="sparelist"
				deleteField="partId"
				@openItem="openItem"
				@deleteItem="deleteItem"
				@getPartsNum="(v)=>{partsList[index].partQty = v }"
			></category>
			
			<view class="item-box" v-if="reserveStateCode === '5'">
				<view class="msg-title">
					审核说明
				</view>
				<view>
					<view v-for="(item,index) in auditList" :key="index">
						<formItem 
						:label="item.label" 
						:key="index" 
						v-model="form[item.model]" 
						:rightIcon="item.rightIcon" 
						:disabled="item.disabled" 
						titleType="dotted-title"
						@rightClick="event(item,index)"
						>						
						</formItem>
					</view>					
				</view>				
			</view>
			<view class="btn" >
				<view v-for="(item,index) in btnList" :key="index" :style="btnWidth">
					<u-button :type="item.type" @click="pass(item)">{{item.label}}</u-button>
				</view>
			</view>
		</view>
		<parts ref="parts" @receiveItem="receiveParts"/>
		<hours ref="hours" @receiveHours="receiveHours"/>
		<u-picker mode="time" v-model="selectTime" @confirm="getDate" :params="dateformat"></u-picker>
	</view>
</template>

<script>
	import progressBar from './components/progressBar/index.vue';
	import formItem from '@/components/lt-formItem/index.vue';
	import listItem from './components/listItem.vue';
	import parts from '@/pages/common/parts.vue';
	import hours from '@/pages/common/workInghours.vue';
	import category from './components/category.vue';
	import { queryAppointmentInfo, examinationPassed, saveAppointment, appointmentReject} from '@/api/bookingManagement.js'
	export default { 
		components:{
			progressBar,
			formItem,
			listItem,
			parts,
			hours,
			category
		},
		onLoad(option){
			console.log('option',option)			
			this.reserveOrderId = option.reserveOrderId
			this.getQueryData()
		},
		computed:{
			btnWidth(){
				console.log('statusCode',this.statusCode)
				return `width:${100/this.btnList.length - 5}%`
			},
			btnList(){
				switch(this.reserveStateCode) {
					// case '5':
					case '10':
						this.editType = true 
						return [
							{
								label:'保存',
								type:'primary',
								methods:'saveForm'
							}
						]
						break;
					// case '1':
					// case '2':
					case '5':
						return [
							{
								label:'拒接',
								methods:'refuse'
							},{
								label:'通过',
								type:'primary',
								methods:'passFrom'
							}
						]
						break;
					default :
						return []
				}
			}
		},
		data(){
			return {
				shrinkType:true,	
				spareType:true,
				reserveStateCode:null,
				selectTime:false,
				editType:false,
				form:{},
				wisList:[],
				partsList:[],
				dateformat:{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute:true,
					timestamp: true
				},
				shrinklist:[
					{
						label:'工时',
						model:'saleWiQty'
						// type:'number'
					},{
						label:'维修类别',
						model:'repairTypeName'
					}
				],
				sparelist:[
					{
						label:'数量',
						model:'partQty',
						type:'number'
					},{
						label:'维修类别',
						model:'repairTypeName'
					}
				],
				auditList:[
					{
						label:'取消说明',
						model:'cancelReason',
						disabled:true
					},{
						label:'审核意见',
						model:'cancelAuditReason',
						disabled:false
					}
				],
				fromList:[
					{
						label:'预约人',
						model:'reserveMan',
						disabled:true
					},{
						label:'车牌号',
						model:'carLicense',
						disabled:true
					},{
						label:'预约电话',
						model:'reserveTel',
						disabled:true
					},{
						label:'预约时间',
						model:'appointDate',
						rightIcon:'arrow-right',
						disabled:true
					},{
						label:'预约内容',
						model:'csDesc',
						disabled:true
					},{
						label:'上次建议项目',
						model:'lastRecommendItem',
						disabled:true
					},{
						label:'取送车',
						model:'isPickDeliveryName',
						disabled:true
						// rightIcon:'arrow-right',
					},{
						label:'拖车救援',
						model:'isHelpName',
						disabled:true
						// rightIcon:'arrow-right',
					},{
						label:'保养套餐选择',
						model:'repairModeName',
						disabled:true
						// rightIcon:'arrow-right',
					}
				]
			}
		},
		methods:{
			getDate(v){
				this.form.appointDate = v.year + '-' + v.month + '-' + v.day + ' ' + v.hour + ':' + v.minute
				this.form.preAppointDate = v.timestamp
				console.log(v)
			},
			getQueryData(){
				const params = {
					reserveOrderId : this.reserveOrderId
				}
				queryAppointmentInfo(params).then(res=>{
					this.form = res.rows.appointmentListVO
					this.reserveStateCode = res.rows.appointmentListVO.reserveStateCode
					this.wisList = res.rows.wis					
					this.partsList = res.rows.parts.map(item=>{					
						let num = Number(item.partQty)
						num = num.toFixed(1)
						item.partQty = num
						return  item
					})
					this.$forceUpdate()
				})
			},
			event(item,index){
				if(this.reserveStateCode === '5' || this.reserveStateCode === '10'){
					if(item.model === 'appointDate'){
						this.selectTime = true 
					}	
				} 		
			},
			// 备件选择回调
			receiveParts(arr){
				if(!this.partsList.length){
					this.partsList = arr
					return
				}  
				// 已存在数据
				const partsIdList = this.partsList.map(parts=>{
					return parts.partId
				})
				// 选择数据
				const addArrIdList = arr.map(parts=>{
					return parts.partId
				})
				let sameType = false
				addArrIdList.forEach(addParts =>{
				    let index =	partsIdList.indexOf(addParts)					
					if(index === -1 ){
						let addItem = arr.filter(item=>{
							return item.partId === addParts
						})
						this.partsList.push(addItem[0])
					} else {
						sameType = true 
					}
				})
				if(sameType){
					uni.showToast({
						title:'已选择重复数据请直接修改数量!',
						duration:2000,
						icon:"none"
					})
				}								
			},
			// 工时选择回调 (待优化)
			receiveHours(arr){
				if(!this.wisList.length){
					this.wisList = arr
					return
				}  
				// 已存在数据
				const wisIdList = this.wisList.map(wis=>{
					return wis.wiId
				})
				// 选择数据
				const addArrIdList = arr.map(wis=>{
					return wis.wiId
				})
				let sameType = false
				addArrIdList.forEach(addParts =>{
				    let index =	wisIdList.indexOf(addParts)					
					if(index === -1 ){
						let addItem = arr.filter(item=>{
							return item.wiId === addParts
						})
						this.wisList.push(addItem[0])
					} else {
						sameType = true 
					}
				})
				if(sameType){
					uni.showToast({
						title:'已选择重复数据!',
						duration:2000,
						icon:"none"
					})
				}			
			},
			// 打开公共页面
			openItem(v){
				console.log(v)
				this.$refs[v].open = true 
			},		
			// 显示隐藏
			changeShrink(v){
				this[v] = !this[v]
			},			
			// 删除
			async deleteItem({ item, arr, idName }){
				const isContinue = await this.$Toast.toast('提示','是否删除？')
				if(!isContinue) return 
				const newArr = arr.filter(arrItem=>{
						return arrItem[idName] != item[idName]
					})
				if(idName === 'partId'){
					this.partsList = newArr
				} else {
					this.wisList = newArr
				}
				
			},
			// 底部按钮
			pass(v){		
				this[v.methods]()
			},
			// 修改/ 保存
			async saveForm(){
				let params = {
					appointmentListVO: this.form,
					wis: this.wisList,
					parts: this.partsList
				}
				let res = await saveAppointment(params)
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				if(res.result === '1'){
					uni.navigateBack()
				}
			},
			// 拒绝
			async refuse (){				 
				if(!this.form.cancelAuditReason){
					uni.showToast({
						title:'请填写审核意见!',
						icon:'none',
						duration:2000
					})
					return 
				}
				let params = {
					cancelAuditReason:this.form.cancelAuditReason,
					reserveOrderId:this.form.reserveOrderId
				}
				let res = await appointmentReject(params)
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				if(res.result === '1'){
					uni.navigateBack()
				}
				console.log(res)
			},
			async passFrom(){
				if(!this.form.cancelAuditReason){
					uni.showToast({
						title:'请填写审核意见!',
						icon:'none',
						duration:2000
					})
					return 
				}
				let params = {
					cancelAuditReason:this.form.cancelAuditReason,
					reserveOrderId:this.form.reserveOrderId
				}
				let res = await examinationPassed(params)
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				if(res.result === '1'){
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg-box{
		width: 100%;
		height: 84vh;
		overflow: hidden;
		overflow-y: scroll;
		padding: 0 24upx 0 24upx;
		.item-box{
			width: 100%;
			background-color: #fff;
			padding: 0 16upx 16upx 16upx;
			border-radius: 10upx;
			.msg-title{
				height: 80upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 12upx;
				border-bottom: 1upx solid #D9D9D9;
				:first-child{
					display: flex;
					flex-direction: row;
				}
				:nth-child(2){
					margin-left: 12upx;
				}
			}
			.shrink{
				width: 100%;
				height: 80upx;
				border-top: 1px solid #F7F7F7;
				color: #999999;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				
			}
		}
		.top{
			margin-top: 24upx;
		}
		.btn{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
	}
</style>
